/* assets/custom_styles.css */

/* --- 深蓝色主题核心样式 (示例) --- */

/* 页面/容器背景 */
body, .maintenance-page-container /* 替换为维修页面的主容器选择器 */ {
    background-color: #112360 !important; /* 主要背景色 */
    color: #ffffff; /* 默认文字颜色 */
}

.modal-dialog {
    max-width: 90vw !important;
    width: 90vw !important;
    margin: 0 auto;
}


/* 筛选区域、详情区域等块级背景 */
.filter-section, .details-section, .table-container /* 替换为相应区域的选择器 */ {
    background-color: #234a78; /* 次要背景色 */
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 4px;
}

/* 标题颜色 */
.page-title, .filter-title, .list-title, .detail-title, .detail-section-title {
  color: #ffffff;
}

/* 表格样式 (假设维修记录用的是 DataTable, ID 为 maintenance-table) */
#maintenance-table {
  color: #ffffff;
  background-color: #234a78;
}
#maintenance-table .dash-header {
  background-color: #1a3a5f;
  color: #ffffff;
  font-weight: bold;
}
#maintenance-table .dash-cell {
  background-color: #234a78;
  color: #ffffff;
  border-bottom: 1px solid #3a6ea5; /* 添加分隔线 */
}
#maintenance-table .dash-cell.dash-cell-selected { /* 选中行 */
  background-color: #3a6ea5;
  border: 1px solid #4d8bc9;
}

/* 下拉框样式 */
.Select-control, .Select-menu-outer {
  background-color: #234a78;
  color: #ffffff;
  border-color: #3a6ea5;
}
.Select-value-label, .Select-placeholder {
  color: #ffffff !important;
}
.Select-option { /* 下拉选项 */
   color: white;
   background-color: #234a78;
}
.Select-option.is-focused {
  background-color: #3a6ea5;
}
.Select-option.is-selected {
  background-color: #4d8bc9;
}

/* 输入框样式 */
input, .DateInput, .DateInput_input {
  background-color: #234a78;
  color: #ffffff;
  border: 1px solid #3a6ea5;
  padding: 6px 12px;
  border-radius: 4px;
}

/* 按钮样式 */
.btn-primary, button /* 根据你的按钮选择器调整 */ {
  background-color: #4d8bc9;
  border-color: #3a6ea5;
  color: white;
}
.btn-secondary {
  background-color: #3a6ea5;
  border-color: #234a78;
  color: white;
}

/* 分页信息 */
.pagination-info {
    color: #ffffff;
    margin-top: 8px;
}

/* 目标：筛选列内的特定下拉框 */
.filter-column .filter-dropdown .Select-control {
  background-color: #0d6efd; /* Bootstrap 主蓝色 */
  border-color: #0a58ca; /* 稍深的边框色 */
  color: white; /* 默认文字颜色（对某些部分可能无效） */
}

/* 鼠标悬停时的样式 */
.filter-column .filter-dropdown .Select-control:hover {
  background-color: #0b5ed7; /* 稍深的蓝色 */
  border-color: #0a58ca;
}

/* 已选值的文字颜色 */
.filter-column .filter-dropdown .Select-value-label,
.filter-column .filter-dropdown .Select--single > .Select-control .Select-value .Select-value-label { /* 针对单选 */
  color: white !important; /* 强制白色 */
}

/* 占位符文字颜色 */
.filter-column .filter-dropdown .Select-placeholder {
  color: rgba(255, 255, 255, 0.7) !important; /* 半透明白色 */
}

/* 下拉箭头颜色 */
.filter-column .filter-dropdown .Select-arrow {
  border-color: white transparent transparent; /* 白色箭头 */
  border-width: 5px 5px 2.5px;
}
.filter-column .filter-dropdown .Select-control:hover .Select-arrow {
   border-color: white transparent transparent; /* 悬停时保持白色 */
}

/* 清除按钮 'x' 的颜色 */
.filter-column .filter-dropdown .Select-clear {
    color: rgba(255, 255, 255, 0.7) !important; /* 半透明白色 */
    font-size: 1.2em; /* 可选：稍微增大 */
}
.filter-column .filter-dropdown .Select-clear:hover {
    color: white !important; /* 悬停时纯白 */
}

/* --- 调整下拉选项菜单样式 --- */

/* 选项菜单的外部容器 (可选，如果需要统一背景) */
.filter-column .filter-dropdown .Select-menu-outer {
   background-color: #0d6efd; /* 与控件背景一致的蓝色 */
   border: 1px solid #0a58ca; /* 边框颜色 */
   border-top-color: #dee2e6; /* 顶部边框可以稍浅，与控件分隔 */
}

/* 单个选项的默认样式 */
.filter-column .filter-dropdown .Select-option {
   color: white; /* 文字白色 */
   background-color: #0d6efd; /* 背景蓝色 */
   padding: 8px 12px; /* 调整内边距 */
}

/* 鼠标悬停或键盘聚焦时的选项样式 */
.filter-column .filter-dropdown .Select-option.is-focused {
  background-color: #0b5ed7; /* 悬停时稍深的蓝色 */
  color: white;
}

/* 已选择的选项在菜单中的样式 (如果需要区分) */
.filter-column .filter-dropdown .Select-option.is-selected {
  background-color: #0a58ca; /* 已选时更深的蓝色 */
  color: white;
  font-weight: bold; /* 可选：加粗 */
}

/* Modal整体深蓝背景和白色字体 */
.modal-content {
    background-color: #15396a !important; /* 深蓝色 */
    color: #fff !important;
    border-radius: 10px;
    border: none;
    max-width: 90vw !important;
    width: 90vw !important;
}

/* Modal Header */
.modal-header {
    background-color: #15396a !important;
    color: #fff !important;
    border-bottom: 1px solid #1e4d8d;
}

/* Modal Title */
.modal-title {
    color: #fff !important;
}

/* Modal Footer */
.modal-footer {
    background-color: #15396a !important;
    border-top: 1px solid #1e4d8d;
}

/* 表单标签字体颜色 */
.modal-content label,
.modal-content .form-label,
.modal-content .mb-3 {
    color: #fff !important;
}

/* 输入框、文本域背景和字体 */
.modal-content input,
.modal-content textarea,
.modal-content .form-control {
    background-color: #1e4d8d !important;
    color: #fff !important;
    border: 1px solid #2a5ca4 !important;
}

.modal-content input::placeholder,
.modal-content textarea::placeholder {
    color: #b0c4de !important;
    opacity: 1;
}

/* Dash Dropdown（dcc.Dropdown）深蓝背景和白色字体 */
.Select-control,
.Select-menu-outer,
.Select-menu {
    background-color: #1e4d8d !important;
    color: #fff !important;
    border: 1px solid #2a5ca4 !important;
}

.Select-placeholder,
.Select--single > .Select-control .Select-value,
.Select-value-label,
.Select-option {
    color: #fff !important;
    background-color: #1e4d8d !important;
}

.Select-option.is-focused,
.Select-option.is-selected {
    background-color: #15396a !important;
    color: #fff !important;
}

/* 下拉箭头颜色 */
.Select-arrow-zone, .Select-arrow {
    color: #fff !important;
}

/* 按钮样式可选美化 */
.modal-footer .btn {
    background-color: #1e4d8d;
    color: #fff;
    border: none;
}
.modal-footer .btn:hover {
    background-color: #15396a;
    color: #fff;
}

/* Force modal visibility when 'show' class is present */
.modal.fade.show {
    opacity: 1 !important;
}

/* 让 Modal 居中 */
.modal-dialog {
    margin: 100px auto 0 100px !important; /* 上 右 下 左 */
    max-width: 90vw !important;
    width: 90vw !important;
    height: 90vh !important;
    max-height: 90vh !important;
    margin: 0 auto;
  
  }

  /* 强制表格蓝底白字 */
.table, .table th, .table td {
  background-color: #15396a !important;
  color: #fff !important;
}